<template>
	<view class="flex-col page">
		<scroll-view scroll-y="true" v-if="list.length>0" style="height:calc(100vh)-40px;" @scrolltolower="loadmore">
			<view class="flex-col group_1">
				<view class="flex-col list">

					<view class="flex-col list-item" v-for="(item, index) in list" :key="index">
						<view class="flex-col group_3">
							<view class="flex-row group_4">
								<image :src="item.address" class="image_2" />
								<text class="text_1 text">{{item.details}}</text>
							</view>
							<!-- <image :src="imgUrl+'16557836485296159013.png'" class="image_3" /> -->
						</view>
						<view class="flex-row equal-division" >
							<image :src="i" class="equal-division-item_2 image_3" v-for="(i,index) in item.feedbackPictures.split(',')" />
						</view>
						<text class="text_2">反馈类型：{{item.feedbackType | filterList}}</text>
						<!-- 反馈类型(1下载/加载问题 2会员付费问题 3章节/图片问题 4APP体验问题 5卡顿/不流畅 6其他) -->
						<text class="text_3">反馈时间：{{item.createDate ? item.createDate :'2022-07-19'}}</text>
						<view class="flex-col section_2" v-if="item.replyDetails == ''">
							<view class="group_6">
								<text class="text_4">平台回复：</text>
								<text class="text_5">{{item.replyDetails?'':'您的反馈已收到, 我们会尽快处理'}}</text>
							</view>
						</view>

					</view>
					<image :src="imgUrl+'16557836481573566560.png'" class="list-divider" v-if="index !== 2" />
				</view>
			</view>


		</scroll-view>
		<view class="w-full h-full u-flex u-col-center u-row-center" style="width: 100vw;height: 90vh;" v-else>
			<u-empty width="400" height="250" textSize="25" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<u-loadmore v-show="more" height="100" fontSize="26" :status="status" />
	</view>
</template>

<script>
	var page = 1
	export default {
		components: {},
		data() {
			return {
				index: 0,
				more: false,
				imgUrl: this.$IMG_URL,
				status: 'loading',
				list: [],
				address: '',
				createDate: '',
				details: '',
				feedbackPictures: '',
				feedbackType: '',
				replyDate: '',
				pic:{},
				//分页
				param: {
					pageSize: 10,
					pageNum: 1
				},
			};
		},
		created() {
			this.getlist()
		},
		methods: {
			getlist(type = 0) {
				this.$http('feedback.query', this.param).then(r => {
					if (r.code == 200) {
						if (type == 0) {
							this.list = r.data;

						} else {
							if (r.data.length > 0) {
								this.list = this.list.concat(r.data);
								this.status = "loadmore";
							} else {
								this.status = "nomore";

							}

						}


					}
				});
			},
			loadmore() {
				this.status = "loading";
				this.more = true;
				this.param.pageNum++;
				this.getlist(1)
			},

		},
		filters: {
			filterList: function(val) {

				if (val == 0) {
					return "下载/加载问题"
				} else if (val == 1) {
					return "会员付费问题"
				} else if (val == 2) {
					return '章节/图片问题'
				} else if (val == 3) {
					return 'APP体验问题 '
				} else if (val == 4) {
					return '卡顿/不流畅'
				} else {
					return '其他'
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.list-item {
		padding: 20.5rpx 0 31rpx;
		border-bottom: 2rpx solid #eee;
	}

	.list-divider {
		width: 95.7333vw;
		height: 0.2667vw;
	}

	.group_3 {
		height: 87rpx;
	}

	.equal-division {
		margin-left: 45rpx;
		margin-top: 23rpx;
		flex-wrap: wrap;
	}

	.group_4 {
		margin-right: 34rpx;
	}

	.image_3 {
		margin-right: 20rpx;
		margin-top: -17rpx;
		flex-shrink: 0;
		align-self: flex-end;
		width: 32rpx;
		height: 32rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_1 {
		padding-bottom: 192rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.list {
		padding: 32rpx;
	}

	.text_2 {
		margin-left: 88rpx;
		margin-top: 29rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_3 {
		margin-left: 88rpx;
		margin-top: 27rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.section_2 {
		margin-right: 80rpx;
		margin-top: 34rpx;
		padding: 22rpx 0 ;
		align-self: flex-end;
		background-color: #f6f7f9;
		border-radius: 10rpx;
	}

	.equal-division-item {
		flex: 1 1 180rpx;
		border-radius: 16rpx;
		width: 180rpx;
		height: 180rpx;
	}

	.equal-division-item_1 {
		margin-left: 29rpx;
		flex: 1 1 180rpx;
		border-radius: 16rpx;
		width: 180rpx;
		height: 180rpx;
	}

	.equal-division-item_2 {
		margin-left: 45rpx;
		/* flex: 1 1 180rpx; */
		border-radius: 16rpx;
		width: 180rpx;
		height: 180rpx;
	}

	.group_6 {
		margin-left: 16rpx;
		margin-right: 19rpx;
		line-height: 33rpx;
	}

	.image_2 {
		flex-shrink: 0;
		border-radius: 50%;
		width: 72rpx;
		height: 72rpx;
	}

	.text {
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
		/*溢出隐藏*/
	}

	.text_1 {
		margin-left: 16rpx;
		margin-bottom: 6rpx;
		flex: 1 1 auto;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		text-align: left;
	}

	.text_4 {
		color: #496a9d;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}
</style>
